<template>
    <Panel>
        <Tabs>
            <Tab name="Details" :selected="true">
                <div class="panel__pad">
                    <div class="row">
                        <div class="col-medium-4-5">
                            <KeyValue label="Description" :value="component.description"></KeyValue>
                        </div>
                        <div class="col-medium-1-5">
                            <KeyValue label="Manufacture" :value="component.manufacture"></KeyValue>
                            <KeyValue label="Version" :value="component.version"></KeyValue>
                            <KeyValue label="Serial #" :value="component.serial_number"></KeyValue>
                        </div>
                    </div>
                </div>
            </Tab>
            <Tab name="Location">
                Location
            </Tab>
            <Tab name="Supplier Infromation">
                Supplier Information
            </Tab>

        </Tabs>
    </Panel>
</template>
<script>
    import KeyValue from './KeyValue.vue'
    import Panel from './Panel.vue'
    import Tab from './Tab.vue'
    import Tabs from './Tabs.vue'

    export default {

        components: {
            Panel,
            KeyValue,
            Tab,
            Tabs
        },

        props: [
            'component'
        ]

    }
</script>
